<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <title>查看用户信息</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background-color: #F1F1F1;
        }
        table{
            text-align:center;
            margin:10px auto;
            width:700px;
            border:2px solid #4DBAA3;
        }
        .sty {
            width:146px;
            height:30px;

        }
        td{
            border: 2px solid #4DBAA3;
        }

        .btn{
            position: absolute;
            bottom: 10px;
            right: 80px;
        }
        .imghead{
            width: 100%;
            margin: 30px 0;
        }
        .layui-upload-list{
            margin:0 auto;
            width:80px;
            height:80px;
            border-radius:50%;
            overflow:hidden;
        }
        .layui-upload-list > a > img{
            width: 100%;
            height: 100%;
        }
        .div_head > p{
            margin: 5px 472px;
        }
        textarea{
            border: 1px solid #EEEEEE;
            width: 80.9%;
            height: 100%;
            resize:none;
        }
    </style>
</head>
<body>
<div>
    <div class="layui-row imghead">
        <div id="idv">
            <div class="div_head">
                <div class="layui-upload" id="div_up">
                    <div class="layui-upload-list">
                        <a href="javascript:;" id="test1">
                            <img src="" id="avatarUrl" width="80px"/>
                        </a>
                    </div>
                </div>
                <p>用户头像</p>
            </div>
        </div>
    </div>
    <form class="layui-form" action="">
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" name="nickname" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">用户账号</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" name="account" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">用户学号</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" name="userCode" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">学习时长</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" readonly="readonly" name="studyDate" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">身份证号码</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" name="idCard" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" name="sex" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" name="email" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">注册时间</label>
                    <div class="layui-input-inline">
                        <input type="text" disabled="disabled" readonly="readonly" id="createDate" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <label class="layui-form-label">个性签名</label>
            <textarea cols="90" readonly="readonly" id="freestyle" rows="2">在这里输入内容...</textarea>
        </div>
        <div class="btn">
            <button onclick="cancel()" class="layui-btn layui-btn-warm">关闭</button>
        </div>
        <input type="hidden" name="userId"/>
    </form>
</div>
</body>
<script>
    var form;
    var $;
    var table;
    var layer;
    var upload;
    var laydate;
    layui.use(['laydate','form','jquery','table','layer','upload'],function() {
        form = layui.form;
        laydate = layui.laydate;
        $ = layui.jquery;
        table = layui.table;
        layer = layui.layer;
        upload = layui.upload;
    });

    $.ajax({
        url:'/UserList/queryBeforeUser',
        dataType:'json',
        data:{"userId":$('input[name = userId]',window.parent.document).val()},
        success:function (data) {
            data = data.data[0];
            $('input[name = userId]').val($('input[name = userId]',window.parent.document).val());
            $('input[name = account]').val(data.account);
            $('input[name = nickname]').val(data.nickname);
            $('input[name = userCode]').val(data.userCode);
            $('input[name = studyDate]').val(data.studyDate);
            $('input[name = phone]').val(data.phone);
            $('input[name = idCard]').val(data.idCard);
            if(data.sex == 1){
                data.sex = "男";
            }else if(data.sex == 2){
                data.sex = "女";
            }else{
                data.sex = "保密";
            }
            $('input[name = sex]').val(data.sex);
            $('input[name = email]').val(data.email);
            $('#createDate').val(data.createDate);
            $('#freestyle').val(data.freestyle);
            $('#avatarUrl').attr('src',data.avatarUrl);
        }
    });

    function cancel() {
        var layer = parent.layer;
        layer.close(layer.index);
    }
</script>
</html>